<template>
    <view class="page-container">
        <!-- 顶部导航栏 -->
        <u-sticky bgColor="transparent">
            <u-navbar title="今日节目单" :autoBack="true" fixed placeholder bgColor="transparent"
                titleStyle="color: #ffffff; font-weight: 500;">
                <template #left>
                    <view class="nav-left">
                        <u-icon name="arrow-left" color="#ffffff" size="20"></u-icon>
                    </view>
                </template>
            </u-navbar>
        </u-sticky>

        <!-- 顶部分类切换 -->
        <view class="category-tabs">
            <u-tabs :list="tabsList" :current="currentTab" @change="handleTabChange" :scrollable="false"
                lineColor="#FF9500" :activeStyle="{
                    color: '#ffffff',
                    fontWeight: 'bold'
                }" :inactiveStyle="{
            color: 'rgba(255, 255, 255, 0.7)'
        }" lineWidth="20"></u-tabs>
        </view>

        <!-- 三大剧场内容 -->
        <scroll-view class="main-theatre-content" scroll-y v-if="currentTab === 0">
            <view class="swiper-section">
                <u-swiper :list="swiperList" :height="200" :interval="4000" previousMargin="30" nextMargin="30" circular
                    :autoplay="false" radius="5" bgColor="transparent" indicatorMode="line"></u-swiper>
            </view>

            <!-- 切换标签 -->
            <view class="detail-tabs">
                <u-tabs :list="[{ name: '演出场次' }, { name: '节目详情' }]" :current="detailsTab" @change="handleDetailsTabChange"
                    lineColor="#FF9500" :scrollable="false" :activeStyle="{
                        color: '#333333',
                        fontWeight: 'bold'
                    }" :inactiveStyle="{
            color: '#666666'
        }"></u-tabs>
            </view>

            <!-- 演出场次内容 -->
            <view v-if="detailsTab === 0" class="show-times-content">
                <view class="time-slot-list">
                    <view class="time-slot-item" v-for="(time, index) in showTimes" :key="index">
                        <view class="time">{{ time.time }}</view>
                        <u-button type="warning" text="开演提醒" size="mini" :plain="true" shape="circle"
                            @click="handleReminder(time)"></u-button>
                    </view>
                </view>
            </view>

            <!-- 节目详情内容 -->
            <view v-else class="programme-detail-content">
                <view class="detail-header">
                    <text class="title">{{ programmeDetails.title }}</text>
                    <view class="info-row">
                        <text class="label">时长：</text>
                        <text class="value">{{ programmeDetails.duration }}</text>
                    </view>
                    <view class="info-row">
                        <text class="label">地点：</text>
                        <text class="value">{{ programmeDetails.location }}</text>
                    </view>
                    <view class="warning-text">{{ programmeDetails.warning }}</view>
                </view>

                <view class="detail-description">
                    <text class="description-text">{{ programmeDetails.description }}</text>
                </view>

                <view class="theatre-name">
                    <text>{{ programmeDetails.subTitle }}</text>
                </view>

                <view class="story-content">
                    <text class="story-text">{{ programmeDetails.story }}</text>
                </view>

                <view class="image-gallery">
                    <image v-for="(img, index) in programmeDetails.images" :key="index" :src="img" mode="aspectFill"
                        class="gallery-image" />
                </view>
            </view>
        </scroll-view>

        <!-- 小剧场内容 -->
        <scroll-view class="small-theatre-content" scroll-y v-if="currentTab === 1">
            <view class="timeline">
                <view class="timeline-item" v-for="(item, index) in smallTheatreList" :key="index">
                    <!-- 时间点 -->
                    <view class="time-node">
                        <view class="time-dot"></view>
                        <view class="time-tag">
                            <text>{{ item.time }}</text>
                        </view>
                    </view>

                    <!-- 节目卡片 -->
                    <view class="show-card">
                        <image class="show-image" :src="item.image" mode="aspectFill" />
                        <view class="show-info">
                            <view class="title-row">
                                <text class="title">{{ item.title }}</text>
                                <u-tag v-if="item.isRecommend" text="推荐" type="warning" size="mini"
                                    shape="circle"></u-tag>
                            </view>
                            <view class="time-info">
                                <text class="time-label">时间：</text>
                                <text class="time-value">{{ item.timeRange }}</text>
                            </view>
                            <view class="venue-info">
                                <text class="venue-label">{{ item.venueType }}</text>
                                <text class="venue-capacity">可容纳{{ item.capacity }}人</text>
                                <u-tag v-if="item.isQueuing" text="较难排队" type="error" size="mini"
                                    shape="circle"></u-tag>
                            </view>
                            <view class="action-row">
                                <u-button type="info" text="详情" size="mini" :plain="true" shape="circle"
                                    @click="showDetails(item)"></u-button>
                                <u-button type="warning" text="开演提醒" size="mini" :plain="true" shape="circle"
                                    @click="setReminder(item)"></u-button>
                                <u-button type="primary" text="导航" size="mini" shape="circle"
                                    @click="navigate(item)"></u-button>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>

        <!-- 排队情况内容 -->
        <scroll-view class="queue-content" scroll-y v-if="currentTab === 2">
            <view class="theatre-image">
                <u-swiper :list="swiperList" :height="200" bgColor="transparent" previousMargin="30" nextMargin="30"
                    circular :autoplay="false" radius="5" indicatorMode="line"></u-swiper>
            </view>
            <!-- 切换标签 -->
            <view class="queue-tabs">
                <u-tabs :list="[{ name: '排队情况' }, { name: '节目详情' }]" :current="queueTab" @change="handleQueueTabChange"
                    lineColor="#FF9500" :scrollable="false" :activeStyle="{
                        color: '#333333',
                        fontWeight: 'bold'
                    }" :inactiveStyle="{
            color: '#666666'
        }"></u-tabs>
            </view>

            <!-- 排队情况内容 -->
            <view v-if="queueTab === 0" class="queue-info-content">
                <view class="theatre-info">
                    <view class="title">{{ queueProgrammeDetails.title }} ⭐</view>
                    <view class="subtitle">{{ queueProgrammeDetails.warning }}</view>
                    <view class="actions">
                        <u-button type="info" text="地图导航" size="mini" shape="circle" plain icon="map"
                            @click="handleNavigation"></u-button>
                        <u-button type="warning" text="点击刷新" size="mini" shape="circle" plain icon="reload"
                            @click="handleRefresh"></u-button>
                    </view>
                </view>

                <view class="queue-list">
                    <view class="queue-item" v-for="(item, index) in queueList" :key="index">
                        <view class="time">{{ item.time }}</view>
                        <view class="status-info">
                            <text class="status-text" :class="{ 'forbidden': item.status === '禁止' }">
                                {{ item.status }}{{ item.type }}
                            </text>
                            <u-tag text="未开排" type="warning" size="mini" shape="circle" v-if="!item.isOpen"></u-tag>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 节目详情内容 -->
            <view v-else class="queue-detail-content">
                <view class="detail-header">
                    <view class="info-row">
                        <text class="label">时长：</text>
                        <text class="value">{{ queueProgrammeDetails.duration }}</text>
                    </view>
                    <view class="info-row">
                        <text class="label">{{ queueProgrammeDetails.type }}</text>
                        <text class="value">可容纳{{ queueProgrammeDetails.capacity }}</text>
                    </view>
                    <view class="warning-text">{{ queueProgrammeDetails.warning }}</view>
                </view>

                <view class="brief-title">
                    <text>{{ queueProgrammeDetails.brief }}</text>
                </view>

                <view class="description-content">
                    <text class="description-text">{{ queueProgrammeDetails.description }}</text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 顶部分类标签
const tabsList = [
    { name: '三大主剧场' },
    { name: '小剧场' },
    { name: '排队情况' }
];
const currentTab = ref(0);

// 小剧场数据
const smallTheatreList = [
    {
        time: '10:30',
        title: '第七机车车厢厂礼堂',
        timeRange: '10:30-11:02',
        venueType: '坐式式观演',
        capacity: 800,
        isRecommend: true,
        image: 'https://img1.baidu.com/it/u=1577425847,2099966114&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'
    },
    {
        time: '10:30',
        title: '曹操的麦田',
        timeRange: '10:30-11:05',
        venueType: '坐式式观演',
        capacity: 300,
        isQueuing: true,
        image: 'https://img2.baidu.com/it/u=3882935905,1447986214&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500'
    },
    {
        time: '10:50',
        title: '下沉岁月',
        timeRange: '10:50-11:07',
        venueType: '站立式观演',
        capacity: 200,
        image: 'https://img1.baidu.com/it/u=2428063485,3219149080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667'
    },
    {
        time: '11:00',
        title: '李家村茶铺',
        timeRange: '11:00-11:27',
        venueType: '坐式式观演',
        capacity: 180,
        isQueuing: true,
        image: 'https://img2.baidu.com/it/u=3882935905,1447986214&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500'
    }
];

// 轮播图数据
const swiperList = [
    'https://img1.baidu.com/it/u=1577425847,2099966114&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
    'https://img2.baidu.com/it/u=3882935905,1447986214&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',
    'https://img2.baidu.com/it/u=3882935905,1447986214&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',
];

// 演出时间列表
const showTimes = [
    { time: '13:00~14:15' },
    { time: '15:00~16:15' }
];

// 处理标签切换
const handleTabChange = (object: object) => {
    currentTab.value = object.index;
};

// 显示详情
const showDetails = (item: any) => {
    uni.showToast({
        title: `查看${item.title}详情`,
        icon: 'none'
    });
};

// 设置提醒
const setReminder = (item: any) => {
    uni.showToast({
        title: `已设置${item.title}开演提醒`,
        icon: 'none'
    });
};

// 导航
const navigate = (item: any) => {
    uni.showToast({
        title: `正在导航至${item.title}`,
        icon: 'none'
    });
};

// 处理开演提醒
const handleReminder = (time: any) => {
    uni.showToast({
        title: `已设置${time.time}场次提醒`,
        icon: 'none'
    });
};

const detailsTab = ref(0); // 控制演出场次/节目详情的切换

// 节目详情数据
const programmeDetails = {
    title: '李家村剧场',
    duration: '75分钟',
    location: '李家村剧场(行进式)',
    warning: '不建议学龄前儿童观看',
    description: '一个村庄里的中原，生生不息的生命史诗！',
    subTitle: '李家村剧场',
    story: `这里复原了一个村庄，
复原了一场大雪，
复原了一片金黄......
我们叫它，李家村。
您将随着村里的人们，回到1942年，
看一看他们身上发生的故事。
看不完的故事，吃饭那么容易，吃饭那么难。
饥饿的人们，在生死边缘会如何抉择？
走进这个故事，您会感到痛苦。`,
    images: [
        'https://img1.baidu.com/it/u=1577425847,2099966114&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
        'https://img2.baidu.com/it/u=3882935905,1447986214&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',
        'https://img2.baidu.com/it/u=3882935905,1447986214&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',
    ]
};

interface TabChangeEvent {
    index: number;
}

// 修改 detailsTab 的切换处理
const handleDetailsTabChange = (event: TabChangeEvent) => {
    detailsTab.value = event.index;
};

const queueList = [
    {
        time: '14:30-14:55',
        status: '禁止',
        type: '代排队',
        isOpen: false
    },
    {
        time: '17:30-17:55',
        status: '禁止',
        type: '代排队',
        isOpen: false
    }
];

const queueTab = ref(0);

const handleQueueTabChange = (object: object) => {
    queueTab.value = object.index;
};

const handleNavigation = () => {
    uni.showToast({
        title: '正在导航...',
        icon: 'none'
    });
};

const handleRefresh = () => {
    uni.showToast({
        title: '刷新成功',
        icon: 'success'
    });
};

const queueProgrammeDetails = {
    title: '候车大厅',
    duration: '25分钟',
    capacity: '550人',
    type: '坐式式观演',
    warning: '不建议学龄前儿童观剧',
    brief: '候车大厅',
    description: `民国火车站候车大厅物品寄存处，里面存放了许多失去了主人的物品：一只手提箱，一把雨伞，一个挂钟，它们背后有什么故事？是什么人将它寄放在这里？又为何再也没有取走？好奇吗？来吧，坐在这里，看人来人往，人去人回......`
};
</script>

<style lang="scss">
.page-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #FF9966 0%, #FF5E62 100%);
    padding-bottom: env(safe-area-inset-bottom);
}

.category-tabs {
    padding: 20rpx 0;
    background: transparent;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.small-theatre-content {
    padding: 30rpx;
    box-sizing: border-box;
    height: calc(100vh - 250rpx);
}

.timeline {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        left: 140rpx;
        top: 0;
        bottom: 0;
        width: 4rpx;
        background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.8) 0%,
                rgba(255, 149, 0, 0.8) 100%);
        border-radius: 4rpx;
    }
}

.timeline-item {
    position: relative;
    margin-bottom: 50rpx;
    padding-left: 180rpx;

    .time-node {
        position: absolute;
        left: 140rpx;
        top: 40rpx;
        transform: translateX(-50%);
        z-index: 2;

        .time-dot {
            width: 24rpx;
            height: 24rpx;
            background: #FF9500;
            border-radius: 50%;
            border: 4rpx solid #FFFFFF;
            box-shadow: 0 0 20rpx rgba(255, 149, 0, 0.4);
        }

        .time-tag {
            position: absolute;
            right: 28rpx;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.9);
            padding: 8rpx 24rpx;
            border-radius: 24rpx;
            box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

            text {
                font-size: 28rpx;
                color: #FF9500;
                font-weight: 600;
            }
        }
    }

    .show-card {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 24rpx;
        overflow: hidden;
        box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
        transform: translateZ(0);
        transition: all 0.3s ease;

        &:active {
            transform: scale(0.98) translateZ(0);
        }

        .show-image {
            width: 100%;
            height: 320rpx;
            background: #f5f5f5;
            transition: all 0.3s ease;
        }

        .show-info {
            padding: 24rpx;

            .title-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20rpx;

                .title {
                    font-size: 34rpx;
                    font-weight: 600;
                    color: #333;
                }
            }

            .time-info,
            .venue-info {
                display: flex;
                align-items: center;
                margin-bottom: 16rpx;
                font-size: 28rpx;

                .time-label,
                .venue-label {
                    color: #999;
                    margin-right: 16rpx;
                }

                .time-value,
                .venue-capacity {
                    color: #333;
                    font-weight: 500;
                    margin-right: 20rpx;
                }
            }

            .action-row {
                display: flex;
                align-items: center;
                gap: 20rpx;
                margin-top: 24rpx;
                padding-top: 20rpx;
                border-top: 2rpx solid rgba(0, 0, 0, 0.05);
            }
        }
    }
}

.main-theatre-content {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    height: calc(100vh - 250rpx);
}

.swiper-section {
    margin-bottom: 30rpx;
    border-radius: 24rpx;
    overflow: hidden;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.theatre-details {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24rpx;
    padding: 30rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);

    .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        margin-bottom: 12rpx;
    }

    .subtitle {
        font-size: 28rpx;
        color: #666666;
        margin-bottom: 16rpx;
    }

    .location {
        display: flex;
        align-items: center;
        gap: 8rpx;
        font-size: 26rpx;
        color: #666666;
        margin-bottom: 30rpx;
    }

    .time-slots {
        .time-slot-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20rpx;

            .header-title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333333;
            }
        }

        .time-slot-list {
            .time-slot-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 20rpx 0;
                border-bottom: 2rpx solid #f5f5f5;

                .time {
                    font-size: 30rpx;
                    color: #333333;
                }
            }
        }
    }
}

.header-image {
    width: 100%;
    height: 400rpx;
    border-radius: 24rpx;
    margin-bottom: 30rpx;
}

.detail-tabs {
    background: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    padding: 10rpx 0;
}

.programme-detail-content {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 30rpx;

    .detail-header {
        margin-bottom: 30rpx;

        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
        }

        .info-row {
            display: flex;
            margin-bottom: 10rpx;
            font-size: 28rpx;

            .label {
                color: #666;
                margin-right: 10rpx;
            }

            .value {
                color: #333;
            }
        }

        .warning-text {
            font-size: 26rpx;
            color: #ff4d4f;
            margin-top: 16rpx;
        }
    }

    .detail-description {
        margin-bottom: 30rpx;

        .description-text {
            font-size: 30rpx;
            color: #333;
            line-height: 1.6;
        }
    }

    .theatre-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
    }

    .story-content {
        margin-bottom: 30rpx;

        .story-text {
            font-size: 28rpx;
            color: #666;
            line-height: 1.8;
            white-space: pre-line;
        }
    }

    .image-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20rpx;

        .gallery-image {
            width: 100%;
            height: 300rpx;
            border-radius: 16rpx;
        }
    }
}

.show-times-content {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);

    .time-slot-list {
        .time-slot-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 30rpx 0;
            border-bottom: 2rpx solid #f5f5f5;

            &:last-child {
                border-bottom: none;
            }

            .time {
                font-size: 32rpx;
                color: #333333;
                font-weight: 500;
            }
        }
    }
}

.queue-content {
    padding: 30rpx;
    box-sizing: border-box;
    height: calc(100vh - 250rpx);
}

.theatre-image {
    width: 100%;
    border-radius: 24rpx;
    margin-bottom: 30rpx;
}

.theatre-info {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 12rpx;
    }

    .subtitle {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
    }

    .actions {
        display: flex;
        gap: 20rpx;
    }
}

.queue-tabs {
    background: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    padding: 10rpx 0;
}

.queue-list {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 20rpx 30rpx;

    .queue-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #f5f5f5;

        &:last-child {
            border-bottom: none;
        }

        .time {
            font-size: 32rpx;
            color: #333;
            font-weight: 500;
        }

        .status-info {
            display: flex;
            align-items: center;
            gap: 16rpx;

            .status-text {
                font-size: 28rpx;
                color: #666;

                &.forbidden {
                    color: #ff4d4f;
                }
            }
        }
    }
}

.queue-info-content,
.queue-detail-content {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24rpx;
    padding: 30rpx;
    margin-top: 20rpx;
}

.queue-detail-content {
    .detail-header {
        margin-bottom: 30rpx;

        .info-row {
            display: flex;
            align-items: center;
            margin-bottom: 16rpx;
            font-size: 28rpx;

            .label {
                color: #666;
                margin-right: 20rpx;
            }

            .value {
                color: #333;
                font-weight: 500;
            }
        }

        .warning-text {
            font-size: 26rpx;
            color: #ff4d4f;
            margin-top: 16rpx;
        }
    }

    .brief-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
        padding-bottom: 20rpx;
        border-bottom: 2rpx solid #f5f5f5;
    }

    .description-content {
        .description-text {
            font-size: 28rpx;
            color: #666;
            line-height: 1.8;
            white-space: pre-wrap;
        }
    }
}

// 暗色模式适配
@media (prefers-color-scheme: dark) {
    .page-container {
        background: linear-gradient(135deg, #2C3E50 0%, #3498DB 100%);
    }

    .timeline {
        &::before {
            background: linear-gradient(180deg,
                    rgba(255, 255, 255, 0.6) 0%,
                    rgba(52, 152, 219, 0.6) 100%);
        }
    }

    .timeline-item {
        .time-node {
            .time-dot {
                background: #3498DB;
                border-color: rgba(255, 255, 255, 0.8);
            }

            .time-tag {
                background: rgba(44, 44, 44, 0.9);

                text {
                    color: #3498DB;
                }
            }
        }

        .show-card {
            background: rgba(44, 44, 44, 0.95);

            .show-info {
                .title-row .title {
                    color: #FFFFFF;
                }

                .time-info,
                .venue-info {

                    .time-label,
                    .venue-label {
                        color: #888;
                    }

                    .time-value,
                    .venue-capacity {
                        color: #FFFFFF;
                    }
                }

                .action-row {
                    border-top-color: rgba(255, 255, 255, 0.1);
                }
            }
        }
    }

    .theatre-details {
        background: rgba(44, 44, 44, 0.95);

        .title {
            color: #ffffff;
        }

        .subtitle,
        .location {
            color: #999999;
        }

        .time-slots {
            .time-slot-header {
                .header-title {
                    color: #ffffff;
                }
            }

            .time-slot-list {
                .time-slot-item {
                    border-bottom-color: #333333;

                    .time {
                        color: #ffffff;
                    }
                }
            }
        }
    }

    .detail-tabs {
        background: #2c2c2c;
    }

    .programme-detail-content {
        background: #2c2c2c;

        .detail-header {
            .title {
                color: #ffffff;
            }

            .info-row {
                .label {
                    color: #999;
                }

                .value {
                    color: #ffffff;
                }
            }
        }

        .detail-description .description-text,
        .theatre-name {
            color: #ffffff;
        }

        .story-content .story-text {
            color: #999;
        }
    }

    .show-times-content {
        background: #2c2c2c;

        .time-slot-list {
            .time-slot-item {
                border-bottom-color: rgba(255, 255, 255, 0.1);

                .time {
                    color: #ffffff;
                }
            }
        }
    }

    .theatre-info,
    .queue-tabs,
    .queue-list {
        background: rgba(44, 44, 44, 0.95);
    }

    .theatre-info {
        .title {
            color: #ffffff;
        }

        .subtitle {
            color: #999;
        }
    }

    .queue-list {
        .queue-item {
            border-bottom-color: rgba(255, 255, 255, 0.1);

            .time {
                color: #ffffff;
            }

            .status-info {
                .status-text {
                    color: #999;

                    &.forbidden {
                        color: #ff4d4f;
                    }
                }
            }
        }
    }

    .queue-info-content,
    .queue-detail-content {
        background: rgba(44, 44, 44, 0.95);
    }

    .queue-detail-content {
        .detail-header {
            .info-row {
                .label {
                    color: #999;
                }

                .value {
                    color: #fff;
                }
            }
        }

        .brief-title {
            color: #fff;
            border-bottom-color: rgba(255, 255, 255, 0.1);
        }

        .description-content {
            .description-text {
                color: #999;
            }
        }
    }
}
</style>